<template>
   <div class="A_box">
     <div class="me_header">
       <img @click="bac()" :src="'./static/lyl/back.png'" alt="">
       <span>动态正文</span>
       <img :src="'./static/lyl/san.png'" alt="">
     </div>
     <div class="m_cont">
       <div class="m_top">
         <div class="t_left">
           <img :src="avatar" alt="">
           <div class="h_rig">
             <p>{{user_login}}</p>
             <p>{{create_time}}</p>
           </div>
         </div>
         <span @click="follow()">{{status?'已关注':'+关注'}}</span>
       </div>
       <div class="m_bottom">
         <p>{{content}}</p>
         <div class="img" v-show="thumbData.length==0?false:true">
           <img @click="scaleph(index)" :class="thumbData.length>1?'actimg':''" v-for="(item,index) in thumbData" :src="item" alt="" :key="index">
         </div>
       </div>
       <div class="share">
         <span>分享到</span>
         <img v-for="(item,index) in shareData" :key="index" :src="item" alt="">
       </div>
     </div>
     <div class="title">
       <span>评论 {{comment_num}}</span>
       <span>赞 {{like_num}}</span>
     </div>
     <ul class="y_ul">
       <li v-for="(item,index) in yongData" :key="index">
         <div class="y_left">
           <img :src="item.avatar" alt="">
         </div>
         <div class="y_right">
           <p>{{item.user_login}}</p>
           <p>{{item.content}}</p>
           <p class="ping_p" v-for="(item2,index2) in item.to_comments" :key="index2">
             <span>{{item2.user_login}} :</span>
             <span>{{item2.content}}</span>
           </p>
           <div class="y_foot">
             <span>{{item.createtime}}</span>
             <div class="y_rig">
               <img @click="pingL2(item)" src="../../../assets/img/ping.png" alt="">
               <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
               <span>{{item.like_num}}</span>
             </div>
           </div>
         </div>
       </li>
     </ul>

     <div class="m_footer">
       <span>分享</span>
       <span @click="pingL()">评论</span>
       <span @click="islike()">{{like_status?'已点赞':'点赞'}}</span>
     </div>

     <!--评论输入框-->
     <div v-if="piShow || $route.query.bol" class="input">
       <input autofocus="autofocus" type="text" v-model="p_cont" placeholder="评论">
       <span @click="sendL()">发送</span>
     </div>

     <transition name="van-slide-right">
       <div v-show="visible" class="tran_right">{{Fade}}</div>
     </transition>
   </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import * as search from "../../../api/search.js"
    export default {
      name: "ActiCont",
      data(){
        return {
          avatar:'',
          user_login:'',
          create_time:'',
          status:0,
          Fade:'',
          visible:false,
          content:'',
          thumbData:[],
          comment_num:'',
          like_num:'',
          like_status:0,
          shareData:[require("../../../assets/img/weixin.png"),require("../../../assets/img/pengyou.png"),require("../../../assets/img/qq.png"),require("../../../assets/img/weibo.png"),require("../../../assets/img/weiyun.png")],
          yongData:[],
          p_cont:'',
          piShow:false,
          OneSend:true,
          to_uid:'',
          parentid:''
        }
      },
      beforeMount(){
        //动态正文
        let par = {id:this.$route.query.id,user_id:this.$store.state.user_id,uid:this.$route.query.uid}
        search.dynamicDetail(par).then(res=>{
          console.log('动态正文',res)
          this.avatar = res.data.avatar;
          this.user_login = res.data.user_login;
          this.status = res.data.status;
          this.create_time = res.data.create_time;
          this.content = res.data.content;
          this.thumbData = res.data.image;
          this.comment_num = res.data.comment_num;
          this.like_num = res.data.like_num;
          this.like_status = res.data.like_status
        });
        //评论列表
        let parms = {type:1,post_id:this.$route.query.id,user_id:this.$store.state.user_id};
        search.commentList(parms).then(res=>{
          console.log('评论列表',res)
          this.yongData = res.comments
        })
      },
      methods:{
        bac(){
          history.go(-1)
        },
        scaleph(i){
          this.$router.push('/photo2/'+this.thumbData.length+'/'+(i+1));
          this.$store.commit('chuan',this.thumbData);
        },
        follow(){
          if (this.status==0){
            this.status = 1;
            let flow = {follow_id:this.$route.query.uid,user_id:this.$store.state.user_id,status:1};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          } else{
            this.status = 0;
            let flow = {follow_id:this.$route.query.uid,user_id:this.$store.state.user_id,status:0};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          }
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status,
              dynamic_id:this.$route.query.id
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num -=1;
              this.like_num -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status,
              dynamic_id:this.$route.query.id
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num = Number(itl.like_num) + 1;
              this.like_num = Number(this.like_num) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        islike(){
          if (this.like_status==1){
            this.like_status=0;
            let parms = {
              id:this.$route.query.id,
              user_id:this.$store.state.user_id,
              status:this.like_status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
              this.like_num -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            this.like_status=1;
            let parms = {
              id:this.$route.query.id,
              user_id:this.$store.state.user_id,
              status:this.like_status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
              this.like_num = Number(this.like_num) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        pingL(){
          this.piShow = true;
          this.OneSend = true
        },
        pingL2(item){
          this.piShow = true;
          this.OneSend = false;
          this.to_uid = item.uid;
          this.parentid = item.id
        },
        sendL(){
          if (this.OneSend) {
            let params = {type:1,post_id:this.$route.query.id,uid:this.$store.state.user_id,content:this.p_cont};
            search.comment(params).then(res=>{
              console.log('评论',res);
              this.piShow = false;
              this.$route.query.bol = false;
              this.comment_num = Number(this.comment_num) + 1;
              this.p_cont = '';
              //评论列表
              let parms = {type:1,post_id:this.$route.query.id,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }else{
            let params = {type:1,post_id:this.$route.query.id,uid:this.$store.state.user_id,content:this.p_cont,to_uid:this.to_uid,parentid:this.parentid};
            search.comment(params).then(res=>{
              console.log('二级评论',res);
              this.piShow = false;
              this.comment_num = Number(this.comment_num) + 1;
              this.p_cont = '';
              //评论列表
              let parms = {type:1,post_id:this.$route.query.id,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }

        }
      }
    }
</script>

<style scoped>
  .A_box{
    padding-bottom: 80px;
  }
  .me_header{
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #b3b2b2;
  }
  .me_header img:nth-child(1){
    width: 25px;
    height: 40px;
  }
  .me_header span{
    font-size: 32px;
  }
  .me_header img:nth-child(3){
    align-self: center;
    width: 60px;
  }

  .m_cont{
    padding: 20px 40px;
    border-bottom: 12px solid #ebe9e9;
  }
  .m_cont .m_top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .m_cont .m_top .t_left img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
  .m_cont .m_top .t_left .h_rig{
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
  }
  .m_cont .m_top .t_left .h_rig p:nth-child(1){
    font-size: 36px;
    line-height: 54px;
    color: #884ca4;
    font-weight: bolder;
  }
  .m_cont .m_top .t_left .h_rig p:nth-child(2){
    font-size: 20px;
    color: #bababa;
  }
  .m_cont .m_top>span{
    width: 120px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #884ca4;
    color: #884ca4;
    font-size: 24px;
    align-self: flex-end;
  }

  .m_cont .m_bottom p{
    font-size: 20px;
    padding-bottom: 20px;
  }
  .m_cont .m_bottom .img img{
    width: 350px;
    height: 500px;
  }
  .m_cont .m_bottom .img .actimg{
    width: 180px;
    height: 180px;
    margin:0 10px 10px 0;
  }
  .m_cont .m_bottom .img img:nth-child(3n+3){
    margin-right: 0;
  }
  .m_cont .share{
    padding: 20px 0;
  }
  .m_cont .share span{
    font-size: 18px;
    vertical-align: 50%;
  }
  .m_cont .share img{
    width: 60px;
    height: 60px;
    margin-left: 20px;
  }
  .title{
    border-bottom: 2px solid #b3b2b2;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .title span:nth-child(1){
    font-size: 24px;
    font-weight: bolder;
  }
  .title span:nth-child(2){
    font-size: 24px;
    color: #717070;
  }
  .y_ul li{
    border-bottom: 2px solid #b3b2b2;
    padding: 40px 40px 30px;
    display: flex;
  }
  .y_ul li .y_left img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 30px;
  }
  .y_ul li .y_right{
    flex-grow: 1;
  }
  .y_ul li .y_right p:nth-child(1){
    font-size: 24px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right p:nth-child(2){
    font-size: 18px;
    line-height: 30px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right .ping_p{
    padding: 20px;
    background: #dcdcdc;
  }
  .y_ul li .y_right .ping_p span{
    font-size: 18px;
  }
  .y_ul li .y_right .ping_p span:nth-child(1){
    color: #884ca4;
  }
  .y_ul li .y_right .y_foot{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .y_ul li .y_right .y_foot span{
    font-size: 18px;
    color: #9c9a9a;
  }
  .y_ul li .y_right .y_foot .y_rig img{
    width: 35px;
    height: 35px;
  }
  .y_ul li .y_right .y_foot .y_rig img:nth-child(1){
    margin-right: 40px;
  }

  .m_footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
    display: flex;
  }
  .m_footer span{
    width: 33%;
    flex-grow: 1;
    font-size: 32px;
    background: #d8d8d8;
    height: 100%;
    line-height: 80px;
    text-align: center;
  }
  .m_footer span:nth-child(2){
    background: #cbcbcc;
    border-left: 2px solid #dcdcdc;
    border-right: 2px solid #dcdcdc;
  }

  .input{
    background: #efefef;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .input input{
    flex-grow: 1;
    border-radius: 10px;
    padding: 15px;
    font-size: 30px;
    caret-color:#48c261;
  }
  .input span{
    align-self: center;
    margin-left: 40px;
    border-radius: 10px;
    width: 90px;
    height: 60px;
    background: #48c261;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
  }

  .tran_right{
    width: 220px;
    height: 60px;
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
</style>
